<template>
  <div class="pagestyle">
    <list_controller
      :style="{ width: state.listBtnType == 6 ? '78%' : '100%' }"
      ref="zujianname"
      :options="state.options"
      :showCaozuo="true"
      @pagechange="pagechange"
    >
      <template v-slot:opraCurdBtnAll>
        <span :class="
                state.listBtnType == 1 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(1)">
              <svg-icon :class="state.listBtnType == 1 ? 'active' : ''" class-name="search-icon" icon-class="qiehuan" />
              历史突变预警
            </span>
      </template>
      <template v-slot:selectNamelist> 实时突变预警 </template>
    </list_controller>
  </div>
</template>

<script setup>
import list_controller from "@/components/commonCom/list_controller";
import { computed, reactive } from "vue";
import { table_headers } from "@/components/commonCom/table_headers";
const router = useRouter();
let state = reactive({
  listBtnType: undefined,
  options: {
    tableheads: computed(() => table_headers.realPointMutation),
    queryList: {
      querys: [
        
      ],
    },
    dataUrl: "/realPointMutation/list",
  },
});

function listInfoBtnClick(type) {
  state.listBtnType = type;
   if (type == 1) {
      goPage()
    }
}
// 跳转历史页面
  const goPage = () => {
    router.push({
      name: 'Cx_hisTBYAlarmList'
    })
  }
</script>
<style lang="scss" scoped>
.xiazai {
  position: absolute;
  top: 42px;
  right: 241px;
  width: 120px;
  height: 64px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  z-index: 99;

  .item {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .item:hover {
    background-color: #ececec;
  }
}

.pagestyle {
  display: flex;
  justify-content: space-between;
}
</style>
